// vue2是用Object.defineProperty()来实现响应式

const obj = {
  name: "zhangsan",
  age: 20,
  x: {
    a: 3,
  },
};

Object.keys(obj).forEach((item) => {
  Object.defineProperty(obj, item, {
    get() {
      return;
    },
    set() {
      console.log("页面重新渲染了");
    },
  });
});

// obj.name = "lisi";
// obj.age = 30;
obj.x.a = 10;

// let age = 20;
// // 三个参数，对象本身，要监听的属性，选项对象
// Object.defineProperty(obj, "age", {
//   get() {
//     // get方法会在我们视图获取obj.age的时候被调用
//     return age;
//   },
//   set(value) {
//     // set方法会在我们视图改变obj.age的时候被调用
//     // console.log("set");
//     age = value;
//     // 再set方法里面就可以重新渲染页面了
//     console.log("页面重新渲染了");
//   },
// });

// // obj.age = 30;
// // console.log(obj.age);
// obj.name = "lisi";
